<template>
    <div class="login-container">
      <video class="video" muted src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5f44838f176299159b65f40e2d9bd277_preview.mp4" loop="loop" autoplay="true"
     ></video>
      <div class="bg2"></div>
      <!-- 登入 -->
        <div class="testbox">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="rule-ruleForm">
              <h1 class="title" >Windows 98</h1>
              <i  @click="changeLoginType"
                   
              :class="['cornerMark', 'iconfont', jiaobiaoType]" ></i>
            <!-- 常规登入 -->
                  <CommonLogin v-if="loginType === 'common'"
                  ref="commonLogin"
                  @syncLoginForm="handleSyncLoginForm"
                  @changeSmsType="changeSmsType"
                  @submit="submit"
                  />

            <!-- 二维码登录 -->
                  <Qrlogin :storageUserInfo="storageUserInfo" v-else-if="loginType === 'qrcode'" />

            <!-- 短信验证码 -->
                  <Smslogin :storageUserInfo="storageUserInfo" v-else />

            </el-form>
                
        </div>
              
    </div>
            
    
</template>
<script>
import CommonLogin from "@/components/Login/commonLogin";
import Qrlogin from "@/components/Login/qrLogin";
import Smslogin from "@/components/Login/smsLogin";
import * as api from "@/api/users.js"
import storage from "@/utils/storage.js"

//声明3个常规校验函数
//校验验证码
var validateCaptcha = (rule, value, callback) => {
       if (value.length !== 5) {
          callback('验证码必须是五位')
       }else{
        callback()
       }
};
//校验用户名
var validateUsername = (rule, value, callback) => {
    // console.log(rule);
    // console.log(value);
    //用户名正则，3到16位（字母，数字，下划线，减号）
    var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
    //如果校验通过，需要直接回调callback()
    //如果校验 不通过，callback()中传参数
    if (uPattern.test(value)) {
        callback()
    }else{
        callback('3到16位(字母，数字，下划线，减号)')
    }

};
//校验密码
var validatePassword = (rule, value, callback) => {
    var reg = /^[a-zA-Z0-9_-]{3,16}$/;
    if (!reg.test(value)) {
      callback('3到16位(字母，数字，下划线，减号)')
    }else{
      callback()
    }
};

  export default {
    data() {
        return {
          //common:常规登入 | qrcode:二维码 | sms:短信验证码
            loginType:'common',//登录方式
            ruleForm: {
                username: "",
                password: "",
                captcha: ""
            },
            rules: {
                username: [
                    { validator: validateUsername, trigger: "blur" }
                ],
                password: [
                    { validator: validatePassword, trigger: "blur" }
                ],
                captcha: [
                    { validator: validateCaptcha, trigger: "blur" }
                ]
            }
        };
    },
    // 计算属性
    computed:{
      jiaobiaoType(){
        if (this.loginType ==='common') {
          return 'icon-erweimajiaobiao'         
        }
        if (this.loginType==='qrcode' || this.loginType==='sms') {
          return 'icon-diannaojiaobiao'
        }
      }
    },
    methods: {
      //更改成短信登陆
      changeSmsType(){
          this.loginType = 'sms'
      },
      //更改登入方式
      changeLoginType(){
        console.log(123);
          if (this.loginType === 'common') {
            console.log(999);
              this.loginType = 'qrcode';
          }else if (this.loginType==='qrcode') {
              this.loginType='common'
          }else if(this.loginType="sms"){
            this.loginType='common'
          }
         
      },
       handleSyncLoginForm(newLoginForm) {
            // console.log(newLoginForm);
            this.ruleForm = newLoginForm;
        },

        //表单提交
        submit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                  //登录
                  //1.获取后台的验证码
                  //2.进行本地校验
                  //3.本地校验通过=>先校验验证码
                  //4.验证码通过再校验用户名和密码
                  //5.成功和失败

                  //本地校验通过
                    //  alert("submit!");
                    api.verifyCaptcha(this.ruleForm.captcha)
                        .then(async res => {
                          // console.log(res);
                          if (res.data.state) {
                            //验证码通过，校验用户名和密码
                            console.log(this.ruleForm);
                            let { username, password } =this.ruleForm
                            let res = await api.loginApi(username,password)
                            // console.log(res);
                            //登入成功
                            if (res.data.state) {
                              //存储用户信息到本地
                              this.storageUserInfo(res.data)
                              //跳转到主页
                              this.$router.push("/")
                            }
                          }else{
                            //验证码不通过，刷新验证码
                            this.$refs['commonLogin']
                            .getCaptcha()
                          }
                        })
                }
                else {
                  //本地校验不通过
                    console.log("error submit!!");
                    return false;
                }
            });
            // console.log(123);
            // console.log(this.$refs);
        },
        // resetForm(formName) {
        //     this.$refs[formName].resetFields();
        // },
      //封装一个方法，用于存储用户的信息和token
        storageUserInfo({userInfo,token,permission}){
          //将信息存到vuex
          this.$store.commit('users/SET_USERINFO',userInfo)
            storage.set('userInfo',userInfo);
            storage.set('qf-token',token)
            storage.set('permission',permission)
            // let r = storage.get('userInfo')
            // console.log(r);
        },
      
      //封装一个存储到本地的方法
      
       
    },
    components: { CommonLogin, Qrlogin, Smslogin }
}
</script>

<style lang="less" scoped>
    /*  //修改element-ui的样式
        //1.打开调试器，找准类名，覆盖样式
        //2.看权重，使用 !important 
        //3.使用深度选择器 >>> /deep/   vue3(v::deep)*/

    .login-container{
      text-align: center;
      
    }
    .video{
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

    .usn {
        /deep/ .el-input__inner{

            border-color: skyblue;
        }
    }
    .el-input{
       /deep/ .el-input__inner{
            width: 250px;
        }
    }

    .testbox{
      position: fixed;
      right: 10%;
      top: 25%;
      border-radius: 5px;
      width: 400px;
      background-color: rgba(0,0,0,.3);
      padding: 50px 40px 50px 0;
      box-sizing: border-box;

          .cornerMark{
            font-size: 60px;
            color: #fff;
            position: absolute;
            right: -1px;
            top: -1px;
            cursor: pointer;
            opacity: .7;
          }

          .title{
            text-align: center;
            margin: 0 -68px 50px 0;
            color:skyblue
          }
      }

     .el-form-item {
        /deep/  .el-form-item__label {
          color: paleturquoise;
          
      }
     }

    /deep/.el-button--primary {
        background: linear-gradient(90deg,#1596fb,skyblue);
        width: 250px;
    }

  .smsVerification{
    /deep/ .el-link{
      color:#fff;
      display: flex;
      justify-content: space-around;
    }
  }

  .smsContainer{
    position: relative;
      /deep/.sendCaptcha{
        position: absolute;
        display: block;
        right: 38px;
        top: 0;
        cursor: pointer;
      }
  }
</style>